Ext.define('Atman.controller.Dashboard3', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            dashboard:{
                selector:'#dashboardview3',
                xtype:'dashboardview3',
                autoCreate:true
            }
        },
        control:{
            dashboard:{
                initialize:'applyDashboard'
            }
        }
    },
    /* Version : 3 */
    applyDashboard:function(){
        var segmentedButton = Ext.create('Ext.SegmentedButton', {
            align:'right',
            allowDepress: true,
            items: [
                {
                    text: '수익지표',
                    pressed: true
                },
                {
                    text: '비용지표'

                },
                {
                    text: '생산성지표'
                }
            ],
            listeners: {
                toggle: function(container, button, pressed){
                    if(pressed){
                        if(button.getText()=='수익지표'){Ext.getCmp('dashboardview3').animateActiveItem(0,{type:'flip'});}
                        else if(button.getText()=='비용지표'){Ext.getCmp('dashboardview3').animateActiveItem(1,{type:'flip'});}
                        else{Ext.getCmp('dashboardview3').animateActiveItem(2,{type:'flip'});}
                    }
                }
            }
        });
        Ext.getCmp('dashboardtitle3').add(segmentedButton);

        var lvcolor = ['red','green','blue'];
        var lvtitle = ['EBITDA','당기순이익','매출액'];
        var lvchartType = ['area','bar','area'];

        var arrCharts = [];
        for(var i=0; i<3; i++){
            var chart = new Ext.chart.Chart({
                animate: true,
                store: {
                    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                    data: [
                        {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
                        {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
                        {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
                        {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
                        {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
                    ]
                },
                legend: {
                    position: 'top'
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    fields: ['data1'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0
                }, {
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    }
                }],
                series: [{
                    type: lvchartType[i],
                    title: ['Data1', 'Data2', 'Data3'],
                    subStyle: {
                        fill: ['blue', 'green', 'red']
                    },
                    xField: 'name',
                    yField: ['data1', 'data2', 'data3']

                }]
            });
            var subPanel = Ext.create('Ext.Panel', {
                flex:1,
                margin: '5px',
                layout:'fit',
                items:[{
                    xtype:'titlebar',
                    docked:'top',
                    title:'타이틀',
                    style:'border-radius: 5px 5px 0px 0px;'
                },chart]
            });
            arrCharts.push(subPanel);
        }

        var topPanel = Ext.create('Ext.Panel', {
            layout:'vbox'
        });
        for(var i=0;i<3;i++){
            if(i%2==0){
                var middlePanel = Ext.create('Ext.Panel', {
                    flex:1,
                    margin: '5px',
                    layout:'hbox'
                });
                middlePanel.add(arrCharts[i]);
                if(i==2){topPanel.add(middlePanel);}
            }
            else{
                middlePanel.add(arrCharts[i]);
                topPanel.add(middlePanel);
            }
        }
        this.getDashboard().add(topPanel);
        var topPanel1 = Ext.create('Ext.Panel', {
            layout:'vbox',
            style:'background-color:green;'
        });
        var topPanel2 = Ext.create('Ext.Panel', {
            layout:'vbox',
            style:'background-color:yellow;'
        });
        this.getDashboard().add(topPanel1);
        this.getDashboard().add(topPanel2);

    }
});